<template>
  <div class="login-container">
    <!-- 导航栏 -->
    <van-nav-bar title="登录" left-arrow @click-left="$router.back()"/>

    <!-- 登录表单 -->
    <van-form ref="loginForm" @submit="onSubmit">
      <van-field v-model="user.mobile" type="number" name="mobile" placeholder="默认手机号13911111111"
        :rules="formRules.mobile">
        <i slot="left-icon" class="iconfont icon-shouji"></i>
      </van-field>

      <van-field v-model="user.code" type="number" name="code" placeholder="万能验证码246810"
        :rules="formRules.code">
        <i slot="left-icon" class="iconfont icon-yanzhengma"></i>
        <template slot="button">
          <van-count-down :time="1000 * 60" format=" ss 秒"  v-if="isCountDownShow" @finish="isCountDownShow = false"/>
          <van-button  size="small" type="default" native-type="button" round class="send-sms-btn" v-else  @click="onSend">发送验证码</van-button>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" >登录</van-button>
      </div>
    </van-form>

  </div>
</template>

<script>
import {login, sendSms} from '@/api/user.js'

export default {
  name: 'LoginIndex',
  comments: {

  },
  props: {

  },
  data() {
    return {
      user: {
        mobile: '',
        code: '',
      },
      isCountDownShow: false,
      formRules: {
        mobile: [
          { required: true, message: '请输入手机号' },
          {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '手机号格式错误'}
        ],
        code: [
          { required: true, message: '验证码' },
          {pattern: /^\d{6}$/, message: '验证码格式错误'}
        ],
      }

    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    async onSubmit() {
      // 1 加载一个登录中的提示
      this.$toast.loading({
        message: '登录中...',
        forbidClick: true, //禁止背景点击
        duration: 0 //持续时间，为0则持续展示
      });

      // 2 登录成功或失败时的操作
      try {
        const {data} = await login(this.user)
        // console.log('登录成功', res)
        this.$toast.success('登录成功')
        this.$store.commit('setUser', data.data)
        //登录成功跳转回登录前的页面，此处使用back不严谨，后面讲功能优化的时候再说
        this.$router.back()

      } catch (err) {
        console.log('登录失败', err)

        if (err.response.status === 400) {
          this.$toast.fail('手机号或验证码错误')
        } else {
          this.$toast.fail('登录失败，请稍后重试')
        }
      }
    },
    onSend() {
      // 1 校验手机号
      this.$refs.loginForm.validate('mobile')
      .then((res) => {
      // 2 验证通过显示倒计时
        console.log('验证通过')
        this.isCountDownShow = true
        // 3 请求发送验证码
        sendSms(this.user.mobile)
        .then((res) => {
          console.log('发送成功')
        })
        .catch((err) => {
          console.log('发送失败')
        })
      })
      .catch((err) => {
         console.log('验证失败', err)
      })
      
      // 3 
    }
  }
}
</script>

<style lang="less" scoped>
.iconfont {
  font-size: 37px
}

.send-sms-btn {
  color: #666;
  background-color: #ededed;
}
</style>
